<!-- 评价类型 -->
<template>
	<view class="tags">
		<button class="tag-btn" v-for="item in tags" :key="item.id" :class="{'active': item.id === tagId}" @click="handleChange(item)">
			{{item.name}}({{item.value}})
		</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const tags = ref([
		{ name: '全部', value: 567, id: 0 },
		{ name: '好评', value: 560, id: 1 },
		{ name: '中评', value: 6, id: 2 },
		{ name: '差评', value: 1, id: 3 },
	]);
	const tagId = ref(0);
	
	const handleChange = (row) => {
		tagId.value = row.id;
	}
</script>

<style lang="scss" scoped>
	.tags {
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		padding-bottom: 20rpx;
		overflow: hidden;

		.tag-btn {
			font-size: 26rpx;
			color: #222;
			background-color: #FED6D6;
			padding: 6rpx 16rpx;
			border-radius: 6rpx;
			margin: 20rpx 0 0 20rpx;

			&.active {
				color: white;
				background-color: #FE3333;
			}
		}
	}
</style>